<template>
    <div class="notice-wrap">
        <div
            class="page-title"
        >
            公告通知
        </div>
        <el-tabs
            v-model="activeName"
            @tab-click="fnChangeType"
        >
            <el-tab-pane
                label="全部"
                name="all"
            />
            <el-tab-pane
                label="系统公告"
                name="system"
            />
            <el-tab-pane
                label="产品更新"
                name="product"
            />
        </el-tabs>
        <div class="table-wrapper">
            <div class="table-lines">
                <div
                    class="table-line"
                    v-for="(item, index) in tableData"
                    :key="index"
                    @click="fnGoDetail(item)"
                >
                    <div class="table-line-content ellipsis">
                        {{ item.announce_type == 'system' ? '[系统公告]' : '' }}{{ item.announce_title }}
                    </div>
                    <div class="table-line-time ellipsis">
                        {{ item.publish_time*1000 | dateFormat('yyyy-MM-dd HH:mm:ss') }}
                    </div>
                    <div class="table-line-operate ellipsis">
                        <el-button
                            type="text"
                        >
                            详情
                        </el-button>
                    </div>
                </div>
                <div
                    class="table-tip"
                    v-if="tableData.length > 0"
                >
                    只保留近12个月的公告
                </div>
                <div
                    class="table-tip"
                    v-if="init && tableData.length == 0"
                >
                    暂无公告
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="pagination-wrapper clearfix">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="fnGetData"
            />
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            init: false,
            activeName: 'all',
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0,
                total_page: 0
            },
            loading: false,
        };
    },
    created(){
        this.$store.commit('header/SET_HEADER', [
            {title: '店铺概况', path: '/'},
            {title: '公告通知'}
        ]);
        this.fnGetData(1);
    },
    methods: {
        fnChangeType(item){
            this.fnGetData(1);
        },
        fnGoDetail(item){
            this.$router.push({
                path: '/notice-detail',
                query: {
                    announce_no: item.announce_no
                }
            });
        },
        fnGetData(page){
            this.$post('/Announce/getList', {
                page_id: page || this.page.now_page,
                announce_type: this.activeName == 'all' ? '' : this.activeName
            }, resp => {
                if (resp.code == 1) {
                    this.init = true;
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;

                }
            });
        },
    }
};

</script>
<style lang="less">
.notice-wrap{
    .el-tabs__header{
        margin-bottom:0;
    }
    .el-tabs__item{
        padding: 0 20px!important;
        box-sizing: border-box;
        &:hover{
            background: #F9F9F9!important;
        }
    }
    .el-tabs__nav-wrap::after{
        background-color: transparent;
    }
}
</style>
<style lang="less" scoped>
.notice-wrap{
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100%;
    overflow: auto;
    padding: 24px;
}
.page-title{
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
    margin-bottom: 12px;

}
.table-wrapper {
    flex: 1;
    overflow: hidden;
}
.pagination-wrapper .el-pagination {
    margin-top: 10px;
    float: right;
}
.table-lines{
    border-top: 1px solid #F0F2F5;
}
.table-line{
    display: flex;
    align-items: center;
    flex-direction: row;
    border-bottom: 1px solid #F0F2F5;
    &:hover{
        background-color: #f5f7fa;
    }
}
.table-line-content{
    flex: 1;
    line-height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    padding: 0 20px;

}
.table-line-time{
    padding: 0 20px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 40px;

}
.table-line-operate{
    padding: 0 20px;
}
.table-tip{
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    line-height: 40px;
    margin-top: 10px;
}
</style>